<template>
  <el-form
    ref="tagFormRef"
    style="width: 100%"
    :model="tagForm"
    :rules="tagFormRules"
    :label-width="labelWidth"
  >
    <el-form-item
      v-for="(domain, index) in tagForm.domains"
      :key="domain.key"
      style="margin-bottom: 20px"
      :label="domain.label"
      :prop="'domains.' + index + '.value'"
      :rules="{
        required: index !== 0 || oneRequest,
        message: domain.error,
        trigger: 'blur',
      }"
    >
      <div class="input-box">
        <el-input
          v-model="domain.value"
          :size="size"
          :placeholder="placeholder"
          class="input"
        />
        <div class="tools">
          <div
            class="minus-ico"
            :class="[tagForm.domains.length === 1 ? 'disabled' : '']"
            @click="remove"
          >
            <i class="el-icon-minus"></i>
          </div>
          <div
            class="minus-ico"
            :class="[index === 0 ? 'disabled' : '']"
            @click="move('up', index)"
          >
            <i class="el-icon-top"></i>
          </div>
          <div
            class="minus-ico"
            :class="[index === tagForm.domains.length - 1 ? 'disabled' : '']"
            @click="move('down', index)"
          >
            <i class="el-icon-bottom"></i>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-button @click="add">添加</el-button>
  </el-form>
</template>

<script>
export default {
  name: "lvMultipleInput",
  props: {
    oneRequest: {
      type: Boolean,
      default: true,
    },
    item: {
      type: Object,
      default: function () {
        return {
          lable: "我是label",
          value: "",
          // key: new Date().getTime(),
          error: "不能为空",
        };
      },
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    initData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    size: {
      type: String,
      default: "mini",
    },
    labelWidth: {
      type: String,
      default: "120px",
    },
    updatecount: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tagForm: {
        domains: [],
      },
      tagFormRules: {},
    };
  },
  watch: {
    updatecount(n) {
      if (this.initData.length !== 0) {
        this.tagForm.domains = [];
        for (let i = 0; i < this.initData.length; i++) {
          this.tagForm.domains.push({
            ...this.initData[i],
            key: new Date().getTime() + i,
          });
        }
      } else {
        console.log("this.item", this.item);
        this.tagForm.domains = [
          {
            ...this.item,
            key: new Date().getTime(),
          },
        ];
      }
    },
  },
  mounted() {
    console.log("this.item", this.item);
    if (this.initData.length !== 0) {
      this.tagForm.domains = [];
      for (let i = 0; i < this.initData.length; i++) {
        this.tagForm.domains.push({
          ...this.initData[i],
          key: new Date().getTime() + i,
        });
      }
    } else {
      this.tagForm.domains = [
        {
          ...this.item,
          key: new Date().getTime(),
        },
      ];
    }

    console.log("tagForm.domains", this.tagForm.domains);
  },
  methods: {
    add() {
      this.tagForm.domains.push({
        ...this.item,
        key: new Date().getTime(),
      });
    },

    remove(item) {
      const index = this.tagForm.domains.findIndex(
        (item2) => item2.id === item.id
      );
      if (index !== -1) {
        this.tagForm.domains.splice(index, 1);
      }
    },

    move(type, index) {
      if (type === "up" && index !== 0) {
        const pre = index - 1;
        const temp = this.tagForm.domains[index];
        this.tagForm.domains[index] = this.tagForm.domains[pre];
        this.tagForm.domains[pre] = temp;
      } else if (type === "down" && index !== this.tagForm.domains.length - 1) {
        const pre = index + 1;
        const temp = this.tagForm.domains[index];
        this.tagForm.domains[index] = this.tagForm.domains[pre];
        this.tagForm.domains[pre] = temp;
      }
      this.$forceUpdate();

      // console.log("tagForm.domains", tagForm.domains);
    },
    reset() {
      this.tagForm.domains = [
        {
          ...this.item,
        },
      ];

      this.$refs.tagFormRef.resetFields();

      nextTick(() => {
        this.$refs.tagFormRef.clearValidate();
      });
    },
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs.tagFormRef.validate((valid, fields) => {
          // console.log('valid', valid)
          resolve({
            valid,
            fields,
            result: JSON.parse(JSON.stringify(this.tagForm.domains)),
          });
        });
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.input-box {
  display: flex;
  align-items: center;
  width: 100%;
  .input {
    flex: 1;
    // margin-right: 10px;
  }
  .tools {
    display: flex;
    align-items: center;
  }
  .minus-ico {
    border: 1px solid #dbdbdb;
    border-radius: 50%;
    // padding: 10px;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
  }
  .minus-ico.disabled {
    background: #dbdbdb;
    cursor: not-allowed;
  }
}
</style>